<template>
    <div class="cmdcfg">
        <canvas ref="canvasEl" :style="`width:${width}px;height:${height}px;border:1px solid lightgray`"></canvas>
    </div>
</template>


<script>

export default {
    components:{
    },
    props: {
        colors:{},
        type:{},
        rectWidth : {},
        rectHeight : {},
    },
    data() {
        return {
            canvas:null,
            width: 10,
            height: 10,
        };
    },
    watch:{
        colors(newval){
            this.colors = this.colors;
            this.drawImg();
        },
        type(newval){
            this.type = newval;
            this.drawImg();
        },
        rectWidth(newval){
            this.rectWidth = newval;
            this.drawImg();
        }
    },
    inject: [],
     

    mounted() {
        this.initCanvas()
        this.drawImg();
    },

    methods: {
        drawImg(isRun){
            if(!isRun){
                clearTimeout(this.runTimer)
                this.runTimer = setTimeout(()=>{
                    this.drawImg(true)
                },100)
                return;
            }

            if(!this.colors || this.colors.length==0) return;
            if(this.type=="point"){
                if(this.width!=10){
                    this.width = 10;
                    this.initCanvas()
                }
                this.drawPoint()
            }else if(this.type=="line"){
                if(this.width!=this.colors.length){
                    this.width = this.colors.length;
                    this.initCanvas()
                }
                this.drawLine()
            }else if(this.type=="rect"){
                if(this.width!=this.rectWidth){
                    this.width = this.rectWidth;
                }
                if(this.height!=this.rectHeight){
                    this.height = this.rectHeight;
                }
                if(!this.width) return;
                if(!this.height) return;
                this.initCanvas()
                this.drawRect()
            }
        },
        drawPoint(){
            this.canvas.moveTo(0,0);
            this.canvas.lineTo(this.width,0);
            this.canvas.lineTo(this.width,this.height);
            this.canvas.lineTo(0,this.height);
            this.canvas.lineTo(0,0);
            this.canvas.fillStyle=`rgb(${this.colors.join(",")})`;
            this.canvas.fill();
        },
        drawLine(){
            var arr = [];
            this.colors.map(a=>{
                a.map(b=>{
                    arr.push(b)
                })
                arr.push(255)
            })

            var imgData=this.canvas.createImageData(this.colors.length,1);
            for (var i=0;i<this.colors.length;i++){
                var item = this.colors[i];
                imgData.data[(4*i)+0]=item[0]
                imgData.data[(4*i)+1]=item[1]
                imgData.data[(4*i)+2]=item[2]
                imgData.data[(4*i)+3]=255
            }
            for(var i=0;i<this.height;i++){
                this.canvas.putImageData(imgData,0,i);
            }
        },
        drawRect(){
            var arr = [];
            this.colors.map(a=>{
                a.map(b=>{
                    arr.push(b)
                })
                arr.push(255)
            })
            var imgData=this.canvas.createImageData(this.width,this.height);
            for (var i=0;i<this.colors.length;i++){
                var item = this.colors[i];
                imgData.data[(4*i)+0]=item[0]
                imgData.data[(4*i)+1]=item[1]
                imgData.data[(4*i)+2]=item[2]
                imgData.data[(4*i)+3]=255
            }
            this.canvas.putImageData(imgData,0,0);
        },
        initCanvas(){
            var that = this;
            var el = this.$refs.canvasEl;
            if(!el) return;
            el.height = this.height;
            el.width = this.width;
            var ctx = el.getContext('2d');
            that.canvas =ctx;
        },
        
    }
}
</script>

<style lang="less" scoped>
    .cmdcfg{
        display: inline-block;
    }
</style>
